<template>
  <el-card class="blog-card" :body-style="{ padding: '20px' }">
    <div class="blog-header">
      <h2 class="title" @click="$emit('click')">{{ blog.title }}</h2>
      <div class="meta">
        <el-tag size="small">{{ blog.category }}</el-tag>
        <span class="time">
          <el-icon><Calendar /></el-icon>
          {{ formatDate(blog.createTime) }}
        </span>
        <span class="author">
          <el-icon><User /></el-icon>
          {{ blog.author }}
        </span>
        <span class="views">
          <el-icon><View /></el-icon>
          {{ blog.viewCount }}
        </span>
      </div>
    </div>
    
    <div class="summary">{{ blog.summary }}</div>
    
    <div class="tags">
      <el-tag
        v-for="tag in blog.tags"
        :key="tag"
        size="small"
        effect="plain"
        class="tag"
      >
        {{ tag }}
      </el-tag>
    </div>
    
    <div class="actions">
      <el-button text @click="$emit('click')">
        阅读更多
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Calendar, User, View, ArrowRight } from '@element-plus/icons-vue'
import type { Blog } from '@/types'
import { formatDate } from '@/utils/format'

defineProps<{
  blog: Blog
}>()
</script>

<style lang="scss" scoped>
.blog-card {
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  
  .blog-header {
    .title {
      margin: 0 0 10px;
      font-size: 1.5em;
      
      &:hover {
        color: var(--el-color-primary);
      }
    }
    
    .meta {
      display: flex;
      align-items: center;
      gap: 15px;
      color: #999;
      font-size: 0.9em;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
  
  .summary {
    margin: 15px 0;
    color: #666;
    line-height: 1.6;
  }
  
  .tags {
    margin: 10px 0;
    
    .tag {
      margin-right: 8px;
    }
  }
  
  .actions {
    display: flex;
    justify-content: flex-end;
  }
}
</style> 